<script setup lang="ts">
import type { VxeGridInstance, VxeGridListeners, VxeGridProps } from 'vxe-table'

import { userAuthInfo } from '@fl/api/iam-api'
import { flowHttp } from '@fl/api/work-flow'
import { reactive, ref } from 'vue'

import jingWeiDu from './jingweidu/index.vue'

const xGrid = ref<VxeGridInstance<any>>()
// 表单数据主要参数
const gridOptions = reactive<VxeGridProps<any>>({
    border: true,
    columnConfig: {
        resizable: true,
    },
    columns: [
        { field: 'mingc', title: '名称' },
        { field: 'xingzqid', title: '行政' },
        { field: 'jingd', title: 'lng经度' },
        { field: 'weid', title: 'lat纬度' },
        { slots: { default: 'operate' }, title: '操作', width: 300 },
    ],
    data: [],
    editConfig: {
        mode: 'row',
        showStatus: true,
        trigger: 'manual',
    },
    height: 530,
    keepSource: true,
    loading: false,
    pagerConfig: {
        currentPage: 1,
        enabled: true,
        pageSize: 10,
        pageSizes: [10, 20, 50, 100, 200, 500],
        total: 0,
    },
    showOverflow: true,
})
const gridEvents: VxeGridListeners<any> = {
    pageChange({ currentPage, pageSize }) {
        if (gridOptions.pagerConfig) {
            gridOptions.pagerConfig.currentPage = currentPage
            gridOptions.pagerConfig.pageSize = pageSize
        }
        getData()
    },
}
getData()
// 获取列表数据
async function getData() {
    gridOptions.loading = true
    flowHttp('query', {
        body: {
            data: {
                code: '2bf97a134b9d9600',
                pageInfo: {
                    page: `${gridOptions.pagerConfig.currentPage}`,
                    size: `${gridOptions.pagerConfig.pageSize}`,
                },
                requireCount: '1',
            },
        },
    }).then((res: any) => {
        console.log('🚀 ~ getData ~ res:', res)
        gridOptions.loading = false
        const { Datas, PagingInfo } = res.data.data
        gridOptions.pagerConfig.total = PagingInfo.DataCount

        gridOptions.data = Datas
    })
}
// 查询接口参数处理
// function useFilter(form: any) {
//     const arr: any = []
//     for (const key in form) {
//         if (Object.prototype.hasOwnProperty.call(form, key)) {
//             if (form[key] !== undefined && form[key] !== null && form[key] !== '') {
//                 arr.push({
//                     filed: key,
//                     value: form[key],
//                 })
//             }
//         }
//     }
//     return arr
// }
// const router = useRouter()
// 获取s2工作流token
function init() {
    userAuthInfo().then((res) => {
        console.log('userAuthInfo---', res)
        window.sessionStorage.setItem('USER_ID', res.id)
    })

    getData()
}
init()
const dialogVisible = ref(false)
const types: any = ref(null)
const rows: any = ref({})
function addJW(row: any, type: any) {
    console.log(row, type)
    types.value = type
    rows.value.value = row
    dialogVisible.value = true
    const jingWeiDuValue = jingweiduRef.value.formFn()
    if (type === 2) {
        jingWeiDuValue.name = row.mingc
        jingWeiDuValue.xzid = row.xingzqid
        jingWeiDuValue.jd = row.jingd
        jingWeiDuValue.wd = row.weid
    }
    else {
        jingWeiDuValue.name = ''
        jingWeiDuValue.xzid = ''
        jingWeiDuValue.jd = ''
        jingWeiDuValue.wd = ''
    }
}
const jingweiduRef = ref('')
function save() {
    const jingWeiDuValue = jingweiduRef.value.formFn()
    const param: any = {
        jingd: jingWeiDuValue.jd,
        mingc: jingWeiDuValue.name,
        weid: jingWeiDuValue.wd,
        xingzqid: jingWeiDuValue.xzid,

    }
    let url = ''
    if (types.value === 2)

        url = 'updateDivision'
    else
        url = 'addDivision'

    flowHttp(url, {
        body: {

            data: {
                ObjectID: types.value === 2 ? rows.value.value.ObjectID : '',
                data: param,
                formCode: '2bf97a134b9d9600',
            },
        },

    }).then((res: any) => {
        if (res.data.code === 200) {
            ElMessage.success('添加成功')
            dialogVisible.value = false
            getData()
        }
    })
}
</script>

<template>
    <div class="list">
        <div>
            <p style="text-align: right;margin: 20px;">
                <el-button type="primary"
                           @click="addJW('', 1)"
                >
                    新增
                </el-button>
            </p>

            <vxe-grid ref="xGrid"
                      v-bind="gridOptions"
                      v-on="gridEvents"
            >
                <template #operate="{ row }">
                    <vxe-button size="mini"
                                content="修改"
                                type="text"
                                style="color:#DA0004"
                                @click="addJW(row, 2)"
                    />
                </template>
            </vxe-grid>
        </div>

        <el-dialog v-model="dialogVisible"
                   title=""
                   width="80%"
        >
            <div>
                <jingWeiDu v-if="dialogVisible"
                           ref="jingweiduRef"
                           :rows="rows"
                           :types="types"
                />
            </div>

            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary"
                               @click="save"
                    >
                        保存
                    </el-button>

                    <el-button @click="dialogVisible = false">
                        取消
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<style lang="scss" scoped>
.list {
    padding: 20px;
    background-color: #ffffff;
}

#container {
    width: 100%;
    height: 400px;
}
</style>
